<template>
  <div class="login">
    <!--  :rules="[{ required: true, message: '请填写用户名' }]"  -->
    <!-- <h3>登录</h3> -->
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="uname" label="用户名" placeholder="请输入账号" />
  
      <van-field show-password v-model="password" type="password" name="upass" label="密码" placeholder="请输入密码" />
  
      <van-field show-password v-model="password2" type="password" name="upass2" label="密码" placeholder="确认密码" />
  
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">注册账号</van-button>
      </div>
  
      <div>
        <router-link class="link" to="/login">账号密码登录</router-link>
      </div>
  
      <div class="message">
        <van-checkbox v-model="checked" icon-size="12px"></van-checkbox>
        我已阅读并同意xxxx的
        <a href="#">《服务协议》</a>
        <a href="#">《绮梦文渊用户协议》</a>
        <a href="#">《个人信息保护政策》</a>
        未注册邮箱将自动注册
      </div>
    </van-form>
  
    <!-- <back-to> </back-to> -->

  </div>
</template>

<script>
// 导入组件
// import BackTo from '@/components/BackTo.vue'
import { Toast , Dialog  } from 'vant'

// 打开页面时
// 初始化（获取存储在本地的所有用户信息）
let qi_user = []
let qi_users_str = localStorage.getItem("qi_USERS")
if(qi_users_str){
  // 如果本地有存储用户信息，就把这个存储信息的字符串转成数组
  qi_user = JSON.parse(qi_users_str)
}

export default {
  data() {
    return {
      username: '',
      password: '',
      password2: '',
      checked: true,
    };
  },
  // 注册组件
  // components: {
  //   BackTo
  // },
  methods: {

    // 点击“注册”的业务逻辑
    onSubmit(values) {
      if (!this.checked) {
        Toast('请阅读并同意协议和政策');
        return false;
      }
      console.log('submit', values);
      // 解构赋值
      let  {uname, upass, upass2} = values;
      // 判断输入框是否为空
      if(uname == "" || upass == "" || upass2 == "") {
        // 弹窗提示
        // Toast.fail('输入框不能为空');
        Toast('输入框不能为空~');
        return false;
      }
      // 把用户信息放在本地（客户端）
      // 这个账号仅仅在我的电脑才有作用
      let arr = qi_user.filter(item=> item.username == uname )

      // 如果数组的长度大于0 ，说明这个账号已经存在
      if(arr.length > 0) {
        Toast(`"${uname}"已存在，不需要重新注册`)
      }
      else {
        // 希望用户长度8-16个字符    邮箱格式
        let regExp = /^[0-9a-zA-Z_]{4,8}@qq.com$/
        if(!regExp.test(uname)) {
          Toast('请输入邮箱格式文本')
          return false
        }

        if(upass.length < 6) {
          Toast('密码需要6位字符以上')
          return false
        }

        if(upass != upass2) {
           Toast.fail('两次输入的密码不一致')
           return false
        }
        
        // 执行注册的逻辑
        let obj = {}
        obj.id = Math.random().toString().slice(2)+"_"+(new Date().getTime())
        obj.username = uname
        obj.password = upass

        // 把这个obj对象丢数组中
        qi_user.push(obj)

        // 再把这个数组转成字符串
        let str =  JSON.stringify(qi_user)
        localStorage.setItem('qi_USERS',str);

        // 给用户反馈“注册结果”
        Dialog.alert({
        confirmButtonColor: '#ffc0cb',
        message: '注册成功，跳转登录。',
        }).then(() => {
          // on close
          // 跳转登录页
          this.$router.push({path: '/login'})
        }); 
      }
    },
  },
};
</script>

<style lang="less">
@import '../common/less/varible.less';

.login {
  padding-top: 150px;

  .van-button--normal {
    background-color: @bgColor;
    border: 0;
  }

  .link {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;

  }

  .message {
    padding: 0 15px;
    box-sizing: border-box;
    margin-top: 20px;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-align: center;
    color: #666;
    line-height: 175%;

    a {
      color: #0c8bf3;
    }

    .van-checkbox {
      display: inline-block !important;
    }
  }

}
</style>


